Очередь XML запросов

[Евгений М]

Доброе время суток.
Задача: выполнить очередь XML запросов, причем так, чтобы страница была доступна для "кликания" во время выполнения этих запросов.

Прочитал что такое XMLHttpRequest, понял чем отличается синхронный запрос от асинхронного.

Схема такая:

function asyncHandler()
{
        if (this.readyState != 4)
                return;
        
        if (this.status == 200)
        {
                writeResult(this.responseXML);
        }
}
 
function runXMLRequest(link)
{
        requestLink = 'controller.php?' + link;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", requestLink, true);
        xmlhttp.onreadystatechange = asyncHandler;
        xmlhttp.send();
}

// ...

for (var i in linkArray)
{
        runXMLRequest(linkArray[i]);
}

linkArray - это массив из 58 элементов. Т.е. 58 запросов нужно выполнить.

Но в данном случае скрипт пытается выполнить сразу одновременно 58 запросов. Это не то что нужно. Нужна очередь.
Если использовать синхронные запросы, то очередь получается, но страница не доступна для кликания.

Вопрос: как реализовать очередь асинхронных XML запросов?

[Octane]

http://javascript.ru/unsorted/async/deferred-deep

[Евгений М]

Octane, спасибо за ссылку.
А есть возможность сделать это без использования фреймворков? Если возникает вопрос типа "А че хочешь использовать фреймворк?", то ответ такой: я изучаю чистый JS.

[Евгений М]

Собственно асинхронную очередь я реализовал:

var link_index = 0;

function writeResult(xmlDoc)
{
	forumtitle = xmlDoc.getElementsByTagName("forumtitle")[0].childNodes[0].nodeValue;
	titles = xmlDoc.getElementsByTagName("title");
	links = xmlDoc.getElementsByTagName("link");
	len = titles.length;
	
	if (len == 0) return;
	
	document.write('<h1>' + forumtitle + '</h1>');
	for (i=0;i<len;i++)
	{
		link = links[i].childNodes[0].nodeValue;
		title = titles[i].childNodes[0].nodeValue;
		document.write('<a target="_blank" href="' + link + '">' + title + '</a><br>');
	}
}

function asyncHandler()
{
	if (this.readyState != 4)
		return;
	
	if (this.status == 200)
	{
		writeResult(this.responseXML);
		link_index++;
		runXMLRequest();
	}
}

function runXMLRequest()
{
	if (link_index>=linkArray.length)
		return;
	
	link = linkArray[link_index];
	requestLink = 'controller.php?' + link;
	xmlhttp = new XMLHttpRequest();
	xmlhttp.open("GET", requestLink, true);
	xmlhttp.onreadystatechange = asyncHandler;
	xmlhttp.send();
}

// .....

runXMLRequest();

Но работает не как хотелось бы. Появилась другая проблема.
Вообщем я смотрю на консоль (вроде так называется) Firebug. Смотрю что последовательно выполняются запросы. После каждого запроса выполняется writeResults().
- Если len равен нулю, то ничего не записывается (это нормально).
- Если len НЕ равен нулю, то записывается результат (document.write). А дальше необычное.
После document.write консоль очищается (до этого был список выполненных запросов) и через пару секунд появляется очередной запрос, который успешно выполнен (200 OK) и список обнаруженных ошибок:

attempt to run compile-and-go script on a cleared scope
if (this.readyState != 4)

Причем 3 штуки и ссылаются на одну строку.
И следующие запросы не выполняются.

Как с этим быть?

[Евгений М]

Последнюю проблему решил. Вместо document.write просто добавлял новые элементы через document.createElement
Окончательный код:

var link_index = 0;
var body = document.getElementById('body_id');

function addElement(content)
{
	newspan = document.createElement('span');
	newspan.innerHTML = content;
	body.appendChild(newspan);
}

function writeResult(xmlDoc)
{
	forumtitle = xmlDoc.getElementsByTagName("forumtitle")[0].childNodes[0].nodeValue;
	titles = xmlDoc.getElementsByTagName("title");
	links = xmlDoc.getElementsByTagName("link");
	len = titles.length;
	
	if (len == 0) return;
	
	content = '';
	
	content += '<h1>' + forumtitle + '</h1>';
	
	for (i=0;i<len;i++)
	{
		link = links[i].childNodes[0].nodeValue;
		title = titles[i].childNodes[0].nodeValue;
		content += '<a target="_blank" href="' + link + '">' + title + '</a><br>';
	}
	
	addElement(content);
}

function asyncHandler()
{
	if (this.readyState != 4)
		return;
	
	if (this.status == 200)
	{
		writeResult(this.responseXML);
		link_index++;
		runXMLRequest();
	}
}

function runXMLRequest()
{
	if (link_index>=linkArray.length)
		return;
	
	link = linkArray[link_index];
	requestLink = 'controller.php?' + link;
	
	xmlhttp = new XMLHttpRequest();
	xmlhttp.open("GET", requestLink, true);
	xmlhttp.onreadystatechange = asyncHandler;
	xmlhttp.send();
}

var linkArray = new Array();

// linkArray = [...]

runXMLRequest();